<template>
  <div class="base noselect">
    <div class="title" @click="isOpen">
      <i
        class="el-icon-arrow-up arrow-animation"
        :class="openmore ? 'arrow-open' : ''"
      ></i>
    </div>
    <div v-if="openmore" class="info-list">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "FoldedPanel",
  props: {
    title: {
      type: String,
      default() {
        return "";
      }
    },
    infos: {
      type: Array,
      default() {
        return [];
      }
    },
    open: Boolean
  },
  data() {
    return {
      openmore: false
    };
  },
  created() {
    this.openmore = this.$props.open;
  },
  methods: {
    isOpen() {
      this.openmore = !this.openmore;
    }
  }
};
</script>
<style lang="scss" scoped>
.arrow-animation {
  transition: all 300ms;
  transform: rotate(0);
}

.arrow-open {
  transform: rotate(180deg) !important;
}

.base {
  background-color: #fff;
  border: 1px solid #f1f1f1;
  border-radius: 4px;
  padding: 6px;
  padding-left: 15px;
  transition: all 1s;

  .title {
    font-size: 16px;
    line-height: 30px;
    color: #333;
    padding-left: 10px;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
